import React from 'react';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import { Icon, Menu, Dropdown, Modal, Form, Input, Button, notification } from 'antd';
import Login from '../Login';
//import {Link} from 'react-router';
import globalConfig from 'config';
import $ from 'jquery';
import './index.less';
import TestForm from './TestForm';
import UpdateUserInfoForm from './UpdateUserInfoForm';
import ajax from '../../utils/ajax';
import Logo from '../Logo';
import TWIcon from '../TWIcon';
import Home from '../../App/Home';

const SubMenu = Menu.SubMenu;  // 为了使用方便

const FormItem = Form.Item;

const router = require('../../route.config.js');

var _this;

/**
 * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接
 */
class Header extends React.Component {
  jumpToLogin() {
    // ajax.post({
    //   url: globalConfig.login.logout,
    //   success: function (resul) {
    //     _this.props.parentHandleLogin();
    //   }
    // })
   window.location.href="/cms/manage/logout#";
  }

  state = {
    modalVisible: false,
    upVisible: false
  }

  //更改密码
  updatePwd = () => {

    if(this.refs.TestForm){  //首次render时没有这两个form,因此为undefined,再次打开时重置表单状态
      this.refs.TestForm.resetFields();
    }
    this.setState({ modalVisible: true, modalTitle: '更改密码', modalDisRole: true, modalInsert: false });
  }

  //更改用户信息
  updateInfo = () => {

    if(this.refs.updateUserInfoForm){
      this.refs.updateUserInfoForm.resetFields();
    }

    //this.setState({userName:this.props.userName,phone:this.props.phone,realName:this.props.realName,nick:this.props.nick});
    this.setState({nick:this.props.nick});
    this.setState({ upVisible: true, upTitle: '更改用户信息' });
  }

  handleOk = () => {
    this.refs.TestForm.validateFields((err, values) => {
      if (!err) {
        const url = `/user/index/updatePwd`;
        ajax.post({
          url: url,
          params: this.refs.TestForm.getFieldsValue(),
          success: function (data) {
            if (data.errorCode == 200) {
              notification.success({
                message: "修改成功"
              });

            } else {
              notification.error({
                message: data.moreInfo
              });
            }

          }
        });
        this.setState({
          modalVisible: false
        });
      }
    });
  }

  handleUpOk = () => {
    const url = `/user/index/updateBase`;
    const oldObj = this.refs.updateUserInfoForm.getFieldsValue();
    //过滤掉undefined数据
    const newObj = {};
    for (const key in oldObj) {
      if (oldObj[key]) {
        // 对于js的日期类型, 要转换成字符串再传给后端
        if (oldObj[key] instanceof Date) {
          newObj[key] = oldObj[key].format('yyyy-MM-dd HH:mm:ss');
        } else {
          newObj[key] = oldObj[key];
        }
      }
    }

    this.refs.updateUserInfoForm.validateFields((err, values) => {
      if (!err) {
          ajax.post({
            url: url,
            params: newObj,
            success: function (data) {
              //alert(data.errorCode == 200)
              if (data.errorCode == 200) {
                //this.props.form.resetFields();
                notification.success({
                  message: "修改成功"
                });
              } else {
                notification.error({
                  message: data.message
                });
              }
          }
        });
        this.setState({
          upVisible: false
        });
      }
    });
  }
  handleCancel = (e) => {
    this.setState({
      modalVisible: false
    });
  }

  handleUpCancel = (e) => {
    this.setState({
      upVisible: false
    });
  }

  componentWillMount = () => {
    this.setState({userName:this.props.userName});
  }

  render() {
    _this = this;
    return (
      <div className='ant-layout-header'>
        <div className="ant-layout-logo">
             <img src="http://image1.ikebohui.com/FoBmvuTGsHX6eT3l3hIWHnXLECYS"/>
        </div>
       
        {/*定义header中的菜单*/}
        <Menu className="header-menu" mode="horizontal" onSelect={this.jumpToLogin}>
          <SubMenu title={<span><TWIcon type="setting_user_edit" />
          <span className="menu-item-title">修改信息</span></span>} onTitleClick={this.updateInfo} >
          </SubMenu>
          <SubMenu title={<span><TWIcon type="setting_user_password" />
          <span className="menu-item-title">修改密码</span></span>} onTitleClick={this.updatePwd}>
          </SubMenu>
          <SubMenu title={<span><TWIcon type="setting_user_info" />
          <span className="menu-item-title">{this.props.realName}</span></span>}>
            <Menu.Item key="logout" >
              注销
            </Menu.Item>
          </SubMenu>
         
        </Menu>
        <Modal title={this.state.modalTitle} visible={this.state.modalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
           <TestForm ref="TestForm"/>
        </Modal>
           
        <Modal title={this.state.upTitle} visible={this.state.upVisible} onOk={this.handleUpOk} onCancel={this.handleUpCancel}>
           <UpdateUserInfoForm ref="updateUserInfoForm" nick={this.state.nick}/>
        </Modal>
      </div>
    );
  }
}

//Header = Form.create({})(Header);

export default Header;
